<script setup lang="ts">
import { RouterView ,useRouter} from 'vue-router'
import { ref } from 'vue';
const router = useRouter()
const active = ref(0);
const value = ref('');
const gotoSearch = ()=>{
  router.push('/search')
}

</script>

<template>
  <div class="app">


    <nav class="flex justify-around items-center px-2 sticky left-0 top-0 z-10 bg-white">
      <van-icon name="bars" size="25" />
      <van-search class="w-4/5" shape="round" @focus="gotoSearch" v-model="value" placeholder="请输入搜索关键词" />
      <van-icon name="chat-o" size="25" />
    </nav>
    
    <router-view v-slot="{ Component }">
      <keep-alive>
        <component :is="Component" />
      </keep-alive>
    </router-view>

    <van-tabbar placeholder v-model="active" active-color="#ee0a24">
      <van-tabbar-item to="/">首页</van-tabbar-item>
      <van-tabbar-item to="/shoppingmall">商城</van-tabbar-item>
      <van-tabbar-item to="/live">直播</van-tabbar-item>
      <van-tabbar-item to="/my">我的</van-tabbar-item>
    </van-tabbar>

  </div>
</template>


<style scoped>
.app {
  width: 100vw;
  height: 100vh;
}
</style>

